<template>
  <div class = "locationList" ref="wrapper">
    <div class = "content">
        <div class = "present">
            <div class = "present-title" ref = "presentElement">当前</div>
            <div class = "present-button"
            @click = "handlePresentClick"
            >&nbsp&nbsp&nbsp&nbsp&nbsp{{this.$store.state.city}}</div>
        </div>
        <div class = "hot-city">
            <div class = "hot-city-title">热门城市</div>
            <div 
            class = "hot-city-button-wrapper"
            v-for = "item of hotcityList"
            :key = "item.id"
            @click = "handleCurrentClick(item.city1)"
            >
                <div class = "hot-city-button">{{item.city1}}</div>
                <div class = "hot-city-button">{{item.city2}}</div>
                <div class = "hot-city-button">{{item.city3}}</div>
                <div class = "hot-city-button">{{item.city4}}</div>
            </div>
        </div>
        <div class = "alph">
            <div 
            class = "alph-wrapper"
            v-for = "(item,key) of alphList"
            :key = "key"
            :ref = "key"
            >
                <div class = "alph-title">{{key}}</div>
                <div class = "alph-button"
                v-for = "itemchild of item"
                :key = "itemchild.id"
                @click = "handleAlphClick(itemchild.name)"
                >
                {{itemchild.name}} 
                <div class = "alph-line"></div></div>
            
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import BMap from 'BMap'
import BScroll from 'better-scroll'


export default {
    
  name: 'locationList',
  props:{
    transitText:String,
    hotcityList:Array,
    alphList:Object.Array,
  },
  methods:{
      handleCurrentClick(city){
          this.$store.dispatch('change',city)
          this.$router.push('/')
      },
       handleAlphClick(city){
          this.$store.dispatch('change',city)
          this.$router.push('/')
      },
      handlePresentClick(){
         this.$router.push('/') 
      }
  },
  watch:{
    transitText(){
      const domElement = this.$refs[this.transitText]
      const domPresent = this.$refs.presentElement
      if(domElement){
        const element = domElement[0]
        this.scroll.scrollToElement(element)
      }else{
        this.scroll.scrollToElement(domPresent)
      }
    }
  },
  data(){
      return{
          city:'',

      }
  },
  mounted(){
      this.scroll = new BScroll(this.$refs.wrapper, {
          click:true,
          disableTouch: false,
          mouseWheel:{
              speed:20,
              invert:false,
              easeTime:300
          }
      })

   
  }
}
</script>

<style lang = 'stylus' scoped>
.locationList
    overflow:hidden
    background:#e9ecf1
    position:absolute
    top:1.12rem
    left:0
    bottom:0
    width:100%
    .content
        width:100%
        height:700rem
        overflow:hidden
        .present
            width:80%
            margin-left:.4rem
        .present-title 
            line-height:.7rem
        .present-button
            background:#fff
            height:.7rem
            line-height:.7rem
            width:100%
            color:#ccc
            text-align:left
        .hot-city
            width:80% 
            margin-left:.4rem
            overflow:hidden
            .hot-city-title 
                line-height:.7rem
            .hot-city-button-wrapper
                display: flex
                justify-content: space-between;
                flex-wrap: wrap;
                .hot-city-button
                    background:#fff
                    height:.7rem
                    line-height:.7rem
                    color:#ccc
                    text-align:center
                    border-radius:.05rem
                    width:1rem
                    flex: 0 0 1.1rem
                    margin:.1rem auto
                    float:left
                .hot-city-button:last-child:nth-child(4n - 1) 
                    margin-right: calc(24% + 4% / 3);
                .hot-city-button:last-child:nth-child(4n - 2) 
                    margin-right: calc(48% + 8% / 3);
        .alph-wrapper
            width:100% 
        .alph-title
            line-height:.7rem
            margin-left:.4rem
        .alph-button
            text-align:left
            padding-left:.4rem
            background:#fff
            height:.7rem
            line-height:.7rem
            color:#ccc
            .alph-line
                border-bottom:1px solid #000

</style>